import styles from './main.module.scss'
import { reactive, defineComponent } from 'vue'
import { ElForm, ElFormItem, ElSelect, ElButton, ElDatePicker, ElOption } from 'element-plus'
export default defineComponent({
  name: 'Search',
  props: {
    taskBtnShow: {
      type: Boolean,
      default: true
    }
  },
  emit: ['search', 'reset', 'create', 'setting'],
  setup(props, { emit, slots }) {
    const form = reactive({
      Title: '',
      CreatedBetween: [],
      Status: 0 // 0 全部 1 未开始 2 运行中 3 已暂停 4 已完成
    })
    const option = [
      { name: '全部状态', id: 0 },
      { name: '未开始', id: 1 },
      { name: '进行中', id: 2 },
      { name: '已暂停', id: 3 },
      { name: '已完成', id: 4 }
    ]
    const onChanegTime = (v: any) => {
      v || (form.CreatedBetween = [])
    }
    const onSearch = () => {
      const result = {}
      Object.keys(form).forEach((key) => result[key] = form[key])
      emit('search', result)
    }
    const onReset = () => {
      form.CreatedBetween = []
      form.Title = ''
      form.Status = 0
      Object.keys(form).forEach((key) => {
        form[key] = Array.isArray(form[key]) ? [] : undefined
      })
      emit('reset', form)
    }
    const onCreate = () => {
      emit('create')
    }
    const onSetting = () => {
      emit('setting')
    }
    const onDateDisabled = (time: any) => time.getTime() > Date.now()
    return () => (
      <>
        <ElForm inline={true} vModel={form}>
          <ElFormItem label="任务标题" prop="name">
            <el-input vModel={form.Title} placeholder="请输入任务标题" onChange={onSearch} style="width:214px" clearable />
          </ElFormItem>
          <ElFormItem label="创建时间">
            <ElDatePicker
              vModel={form.CreatedBetween}
              style="width:200px"
              type="daterange"
              format="YYYY-MM-DD"
              valueFormat="YYYY-MM-DD HH:mm:ss"
              defaultTime={[new Date(0, 0, 0, 0, 0, 0), new Date(0, 0, 0, 23, 59, 59)]}
              disabled-date={(time: any) => time.getTime() > Date.now()}
              start-placeholder="开始时间"
              end-placeholder="结束时间"
              format="YYYY-MM-DD"
              onChange={onChanegTime}
            />
          </ElFormItem>
          <ElFormItem label="任务状态">
            <ElSelect
              style="width:100%"
              vModel={form.Status}
              placeholder="请选择"
              vSlots={{
                default: () => (
                  <>
                    {option.map((item) => (
                      <ElOption key={item.value} label={item.name} value={item.id} />
                    ))}
                  </>
                )
              }}
            />
          </ElFormItem>
          <ElFormItem>
            <ElButton type="primary" onClick={onSearch}>
              查找
            </ElButton>
            <ElButton onClick={onReset}>清空</ElButton>
          </ElFormItem>
          <ElFormItem class={styles.right_btn}>
            <ElButton type="primary" onClick={onCreate}>
              新建任务
            </ElButton>
            <ElButton v-show={props.taskBtnShow} onClick={onSetting}>
              任务设置
            </ElButton>
          </ElFormItem>
        </ElForm>
      </>
    )
  }
})
